<template>
  <div class="following-list-container">
    <searchBox>
      <template #yyxbread>
        <div style="display: flex; align-items: center">
          <el-icon>
            <Location />
          </el-icon>
          <span class="f12 ml10 mr10">当前位置：</span>
          <el-breadcrumb separator="/" class="f14">
            <el-breadcrumb-item>预算报价</el-breadcrumb-item>
            <el-breadcrumb-item class="active">预算报价明细</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
    </searchBox>
    <div class="content">
      <el-container class="out-container">
        <el-aside width="300px">
          <!-- 基础信息 -->
          <div class="baseinfo-wrap">
            <p class="title mb14">基础信息</p>
            <p class="info-item">
              <b class="label">客户名称：</b>
              <span>{{ customObj.customerName || "-" }} {{ customObj.customerMobileCode || "-" }}</span>
            </p>
            <p class="info-item">
              <b class="label">项目地址：</b>
              <span>{{ customObj.customerAddress || "-" }}</span>
            </p>
            <p class="info-item">
              <b class="label">户型：</b>
              <span>{{ customObj.customerSummary || "-" }}</span>
            </p>
            <p class="info-item">
              <b class="label">面积：</b>
              <span>{{ customObj.houseArea || "-" }}</span>
            </p>
            <p class="info-item">
              <b class="label">设计师：</b>
              <span>{{ customObj.designUserName || "-" }}</span>
            </p>
          </div>

          <!-- 模板信息 -->
          <div class="template-wrap">
            <p class="title mb14">
              模板信息
              <el-button
                type="primary"
                link
                @click="
                  () => {
                    drawer = true;
                  }
                "
              >
                <b style="color: #213270">导入模板</b><img src="@/assets/images/download-icon.png" alt="" class="ml8" />
              </el-button>
            </p>
            <div class="template-list">
              <template v-if="tempList.length > 0">
                <div
                  class="template-item"
                  :class="{ active: item.budgetId === currTemp.budgetId }"
                  v-for="(item, index) in tempList"
                  :key="item.id"
                  @click="changeTemp(item)"
                >
                  <p>{{ item.budgetName || "-" }}</p>
                  <div class="footer">
                    <span>编辑时间：{{ item.updateTime || "-" }}</span>
                    <el-popover
                      placement="bottom"
                      title=""
                      :width="200"
                      trigger="hover"
                      :popper-class="'template-actionmore'"
                      v-if="item.disable !== 1"
                    >
                      <!-- disable 1-禁用 0-启用 -->
                      <template #default>
                        <div class="action-wrap">
                          <p>
                            <el-button
                              type="primary"
                              link
                              @click="
                                () => {
                                  isOpenEdit = true;
                                  optionInfoEdit.detail = { ...item, name: item.budgetName };
                                  optionInfoEdit.submitFun = updateBudgetQuotationNameFun;
                                }
                              "
                              >编辑</el-button
                            >
                          </p>
                          <p>
                            <el-button
                              type="primary"
                              link
                              @click="
                                () => {
                                  currTempDelCopy = item;
                                  copyBudgetQuotationFun();
                                }
                              "
                              >复制</el-button
                            >
                          </p>
                          <p><el-button type="primary" link @click="startContract(item)">发起合同</el-button></p>
                          <p>
                            <el-button
                              type="danger"
                              link
                              @click="
                                () => {
                                  _isOpenDel = true;
                                  currTempDelCopy = item;
                                }
                              "
                              >删除</el-button
                            >
                          </p>
                        </div>
                      </template>
                      <template #reference>
                        <el-button type="primary" link
                          ><el-icon><MoreFilled /></el-icon
                        ></el-button>
                      </template>
                    </el-popover>
                  </div>
                  <i class="package-icon" v-if="item.budgetType === 2">套餐</i>
                </div>
              </template>
              <el-empty v-else description="暂无数据" />
            </div>
          </div>
        </el-aside>
        <el-main>
          <!-- 预算报价详情明细 -->
          <PackageCom
            ref="packageRef"
            :optionInfo="optionInfoPackage"
            :customInfo="customObj"
            @refreshTempList="queryBudgetQuotationTemplateListFun()"
          />
        </el-main>
      </el-container>

      <!-- 修改模板名称 -->
      <editNameDialog v-model:isOpen="isOpenEdit" :optionInfo="optionInfoEdit" />
      <!-- 删除导入模板 二次确认 -->
      <ActionSubmitDialog
        v-model:isOpen="_isOpenDel"
        :title="'提醒'"
        :message="'您正在删除导入的模板，请问是否继续当前操作？'"
        :submitBtnText="'继续'"
        @submit="returnSubmitDel"
      />

      <!-- 导入模板抽屉 -->
      <el-drawer
        title="选择预算模板"
        v-model="drawer"
        :direction="'rtl'"
        modal-class="import-temp-drawer"
        :before-close="handleClose"
      >
        <div class="drawer-content">
          <el-input
            v-model="searchkeyTemp"
            clearable
            style="width: 314px"
            placeholder="请输入模板名称"
            :prefix-icon="Search"
            @change="chooseTemplateFun"
          />
          <div class="temp-drawer-list">
            <template v-if="drawerTempList.length > 0">
              <div
                class="temp-drawer-item"
                :class="{ active: drawerSelectObj.templateId === item.templateId }"
                v-for="(item, index) in drawerTempList"
                :key="index"
                @click="
                  () => {
                    drawerSelectObj = item;
                  }
                "
              >
                <header>
                  <p>
                    {{ item.budgetName || "-" }} <span>（包含空间{{ item.spaceList?.length }}个）</span>
                  </p>
                </header>
                <div class="block-wrap">
                  <template v-if="item?.spaceList?.length > 0">
                    <p class="block-item" v-for="(item2, index2) in item.spaceList" :key="index2">{{ item2.spaceName || "-" }}</p>
                  </template>
                  <p class="pt14" v-else>无</p>
                </div>
                <i class="package-icon" v-if="item.budgetType === 2">套餐</i>
              </div>
            </template>
            <el-empty v-else description="暂无数据" />
          </div>
        </div>
        <template #footer>
          <div style="flex: auto">
            <el-button type="info" @click="handleClose">取消</el-button>
            <el-button type="primary" :disabled="!drawerSelectObj.templateId" @click="confirmImport">确认导入</el-button>
          </div>
        </template>
      </el-drawer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ElMessage } from "element-plus";
import searchBox from "@/views/home/components/search";
import { MoreFilled, Search } from "@element-plus/icons-vue";
import PackageCom from "./components/package.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import {
  getCustomDetail,
  importBudgetQuotation,
  queryBudgetQuotationTemplateList,
  chooseTemplate,
  updateBudgetQuotationName,
  delBudgetQuotation,
  copyBudgetQuotation
} from "@/apis/quote-price/following";
import editNameDialog from "./components/editNameDialog.vue";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";

const packageRef = ref();
const ysId = ref(route.query.ysId);
const tempList = ref([]); //已导入的模板列表
const currTemp = ref({ budgetId: null });
const currTempDelCopy = ref({}); //删除、复制当前的模板obj
const drawer = ref(false);
const searchkeyTemp = ref("");
const drawerTempList = ref([
  {
    id: 1,
    children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }, { id: 77 }, { id: 88 }, { id: 99 }]
  },
  { id: 2, children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }] },
  { id: 3, children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }] },
  { id: 4, children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }] },
  { id: 5, children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }] },
  { id: 6, children: [{ id: 11 }, { id: 22 }, { id: 33 }, { id: 44 }, { id: 55 }, { id: 66 }] }
]);
const drawerSelectObj = ref({ templateId: null });
const isOpenEdit = ref(false); //修改模板名字弹窗
const optionInfoEdit = ref({ detail: {} }); //修改模板名字详情obj
const _isOpenDel = ref(false); //删除导入的模板 二次确认
const optionInfoPackage = ref({ currTempObj: {}, loading: false });

onMounted(() => {
  queryBudgetQuotationTemplateListFun(); //获取已导入的模板列表
  getCustomDetailFun(); //获取客户详情
  chooseTemplateFun(); //获取选择模版列表，供导入模板选择使用
});

const changeTemp = item => {
  currTemp.value = item;
  optionInfoPackage.value.currTempObj = item;
  packageRef.value && packageRef.value.resetCurrSpaceObj(); //重置当前选中的空间obj
  getCustomDetailFun(); //获取客户详情
};

/**复制导入的模板 */
const copyBudgetQuotationFun = () => {
  console.log("复制模板===", currTempDelCopy.value);
  copyBudgetQuotation({ budgetId: currTempDelCopy.value.budgetId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "模板复制成功",
        type: "success"
      });
      queryBudgetQuotationTemplateListFun();
    }
  });
};

/**修改导入模板的名字 */
const updateBudgetQuotationNameFun = async data => {
  await updateBudgetQuotationName({ budgetId: optionInfoEdit.value.detail.budgetId, budgetName: data.name }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "模板名称修改成功",
        type: "success"
      });
      queryBudgetQuotationTemplateListFun();
    }
  });
};

/**删除导入的模板 */
const returnSubmitDel = () => {
  delBudgetQuotation({ budgetId: currTempDelCopy.value.budgetId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "模板删除成功",
        type: "success"
      });
      _isOpenDel.value = false;
      queryBudgetQuotationTemplateListFun();
    }
  });
};
/**获取已导入的模板列表 */
const queryBudgetQuotationTemplateListFun = () => {
  queryBudgetQuotationTemplateList({ ysId: ysId.value }).then(res => {
    if (res.code === 200) {
      tempList.value = res.data || [];

      currTemp.value = tempList.value.length > 0 ? tempList.value[0] : { budgetId: null };
      changeTemp(currTemp.value);
    }
  });
};

/**获取选择模版列表 */
const chooseTemplateFun = () => {
  chooseTemplate({ templateName: searchkeyTemp.value }).then(res => {
    if (res.code === 200) {
      drawerTempList.value = res.data;
    }
  });
};
/**确认导入选中的模板 */
const importBudgetQuotationFun = async () => {
  await importBudgetQuotation({
    templateId: drawerSelectObj.value.templateId,
    budgetId: drawerSelectObj.value.budgetId,
    ysId: ysId.value
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "模板导入成功",
        type: "success"
      });
    }
  });
};

/**获取客户详情 */
const customObj = ref({});
const getCustomDetailFun = () => {
  getCustomDetail({ ysId: ysId.value, budgetId: currTemp.value.budgetId || 0 }).then(res => {
    if (res.code === 200) {
      customObj.value = res.data;
    }
  });
};

const startContract = item => {
  currTemp.value = item;
  optionInfoPackage.value.currTempObj = item;
  setTimeout(() => {
    packageRef.value.startContract(optionInfoPackage.value); //重置当前选中的空间obj
  }, 500);
  getCustomDetailFun(); //获取客户详情
};

const handleClose = () => {
  drawer.value = false;
  resetDrawer();
};
/**确认导入模板 */
const confirmImport = async () => {
  await importBudgetQuotationFun();
  queryBudgetQuotationTemplateListFun(); //更新已导入模板的列表
  drawer.value = false;
  resetDrawer();
};
const resetDrawer = () => {
  drawerSelectObj.value = { templateId: null };
  searchkeyTemp.value = "";
};
</script>

<style lang="scss">
.template-actionmore {
  min-width: auto !important;
  width: 120px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  .el-button {
    width: 100%;
    justify-content: flex-start !important;
    line-height: 26px !important;
    font-size: 12px !important;
  }
}
.import-temp-drawer.el-overlay {
  .el-drawer {
    width: 710px !important;
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }
  .el-drawer__header {
    border: 1px solid #dcdfe6;
    margin-bottom: 0;
    padding-bottom: 24px;
    color: #131414;
    font-size: 18px;
  }
  .el-drawer__footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    padding: 14px 20px;
  }
}
</style>
<style lang="scss" scoped>
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
:deep(.el-breadcrumb) {
  .el-breadcrumb__item {
    font-weight: normal;
    color: #1d2129;
    &.active {
      .el-breadcrumb__inner {
        font-weight: bold;
      }
    }
  }
}
.drawer-content {
  .temp-drawer-list {
    .temp-drawer-item {
      margin-top: 20px;
      border: 1px solid #e1e6ed;
      border-radius: 8px 8px 8px 8px;
      cursor: pointer;
      position: relative;
      &.active {
        background-color: #f1f4f6;
        box-shadow: 0px 0px 10px 0px rgba(134, 144, 156, 0.1);
        border-color: transparent;
      }
      header {
        padding: 10px 20px;
        border-bottom: 1px solid #e1e6ed;
        p {
          color: #3d3d3d;
          span {
            color: #86909c;
          }
        }
      }
      .block-wrap {
        padding: 0 20px 14px 20px;
        display: flex;
        flex-wrap: wrap;
        .block-item {
          margin: 14px 10px 0 0;
          background-color: #e1e6ed;
          border-radius: 4px;
          color: #4e5969;
          padding: 8px 20px;
        }
      }
      .package-icon {
        position: absolute;
        right: -1px;
        top: -1px;
        background-color: #ffc86a;
        border-radius: 0 10px 0 10px;
        line-height: 24px;
        padding: 0 14px;
        font-size: 12px;
        font-style: normal;
        color: #3d3d3d;
      }
    }
  }
}
p.title {
  color: #4e5969;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  line-height: 24px;
  font-weight: bold;
}
.following-list-container {
  margin-top: 114px;
  height: calc(100vh - 140px);
  box-sizing: border-box;
  & > .content {
    height: 100%;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
  }
  :deep(.out-container) {
    // background-color: green;
    height: 100%;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px;
    & > .el-aside {
      background-color: white;
      .baseinfo-wrap {
        padding: 14px 20px;
        box-sizing: border-box;
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 2;
        border-bottom: 1px solid #e1e6ed;
        .info-item {
          margin-bottom: 16px;
          display: flex;
          justify-content: space-between;
          line-height: 24px;
          b.label {
            font-weight: normal;
            color: #86909c;
            display: inline-block;
            width: 80px;
          }
          span {
            flex: 1;
            color: #3d3d3d;
          }
        }
      }
      .template-wrap {
        padding: 20px;
        box-sizing: border-box;
        .template-list {
          .template-item {
            padding: 16px;
            border-radius: 10px;
            background-color: #ebeef1;
            box-shadow: 0px 0px 10px 0px rgba(134, 144, 156, 0.1);
            margin-bottom: 20px;
            position: relative;
            cursor: pointer;
            p {
              margin-bottom: 10px;
              color: #191919;
            }
            .footer {
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 12px;
              color: #86909c;
              .el-button {
                color: #86909c;
              }
            }
            &.active {
              background-color: #424e66;
              P {
                color: white;
              }
            }
            .package-icon {
              position: absolute;
              right: -1px;
              top: -1px;
              background-color: #ffc86a;
              border-radius: 0 10px 0 10px;
              line-height: 24px;
              padding: 0 14px;
              font-size: 12px;
              font-style: normal;
              color: #3d3d3d;
            }
          }
        }
      }
    }
    & > .el-main {
      padding: 0;
      border-left: 1px solid #e1e6ed;
      // .inner-container.el-container {
      //   height: 100%;
      //   .el-header {
      //     position: sticky;
      //     top: 0;
      //     z-index: 2;
      //     background-color: white;
      //     height: 52px;
      //     border-bottom: 1px solid #e1e6ed;
      //     display: flex;
      //     justify-content: space-between;
      //     align-items: center;
      //     border-radius: 0 10px 0 0;
      //   }
      //   .el-container {
      //     height: calc(100% - 52px);
      //   }
      //   .el-aside {
      //   }
      //   .el-main {
      //     border-left: 1px solid #e1e6ed;
      //   }
      // }
    }
  }
}
</style>
